<script lang="ts">
import { ref, reactive, defineComponent } from "vue";

export default defineComponent({
  name: "online-modal",
  title: "online modal",
  props: {
    modalPruduct: {
      type: Object,
    },
    webConfig: {
      type: Object
    }
  },
  async setup(prop: any) {
    let data = reactive({
      dialogVisible: false,
    });

    const whatsAppData = ref() as any
    const skypeData = ref() as any
    const webInfo = ref() as any
    const onlineSupportData = ref() as any

    webInfo.value = window.localStorage.getItem('webInfo')
    onlineSupportData.value = JSON.parse(webInfo.value)
    if (JSON.parse(onlineSupportData?.value.Whatsapp)) {
      whatsAppData.value = JSON.parse(onlineSupportData?.value.Whatsapp)
    }
    skypeData.value = JSON.parse(onlineSupportData.value.Skype)

    const handleClose = () => {
      data.dialogVisible = false;
    };
    const handleOpen = () => {
      data.dialogVisible = true;
    };

    const handleToWhatsAPP = (item: any) => {
      window.open(`https://api.whatsapp.com/send?phone=${item}`)
    }
    return {
      data,
      handleOpen,
      handleClose,
      skypeData,
      whatsAppData,
      handleToWhatsAPP,
    };
  },
});
</script>
<template>
  <div class="contactModal">
    <el-dialog width="50%" v-model="data.dialogVisible" title="Online support">
      <div class="midContent">
        <div class="flex align_center midText" v-if="whatsAppData">
          <i class="iconfont icon-whatsapp supportIcon whatsappIcon"></i>
          <div class="contentText">
            <p class="pointer" v-for="item in whatsAppData" :key="item.key" @click="handleToWhatsAPP(item.key)">{{ item.key }}
            </p>
          </div>
        </div>
        <div>
          <div class="flex align_center midText midMar">
            <i class="iconfont icon-skype supportIcon skypeIcon"></i>
            <div class="contentText">
              <p class="pointer" v-for="item in skypeData" :key="item.key">
                <a :href="'skype:' + item.key + '?call'">{{ item.key }}</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.contactModal {

  .midContent {
    display: flex;
    justify-content: space-around;
  }

  .contentText {
    line-height: 2;
  }

  .supportIcon {
    font-size: 46px;
    margin-right: 30px;
  }

  .whatsappIcon {
    color: #25d366;
  }

  .skypeIcon {
    color: #00aff0;
  }

  .foor_btn {
    margin-left: 30px;
  }

  :deep(.el-dialog) {
    border-radius: 15px;
  }

  :deep(.el-dialog__body) {
    margin: 0 50px;
    height: 190px;
  }

  :deep(.el-dialog__header) {
    margin: 0 50px;
    padding-top: 50px;
  }

  :deep(.el-dialog__title) {
    font-size: 40px;
    color: #1d1d1f;
    font-family: alibabapuhuitiBold;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .contactModal {
    :deep(.el-dialog) {
      border-radius: 8px;
      width: 96%;
    }

    .midContent {
      flex-direction: column;
    }

    .midText {
      justify-content: center;
    }

    .midMar {
      margin-top: 30px;
    }

    :deep(.el-dialog__body) {
      margin: 0 50px;
      height: 300px;
    }

    :deep(.el-dialog__body) {
      margin: 0 0px;
    }

    :deep(.el-dialog__header) {
      margin: 0 0px;
      padding-top: 50px;
    }
  }
}
</style>